<template>
	<view class="login-page">
		<view class="login-box">
			<view class="login-title">
				萤火
			</view>
			<view class="login-form">
				<view class="form-item">
					<uv-input type="number" v-model="state.model.mobile" :disabled="state.isLoading" :focus="true"
						placeholder="请输入手机号" font-size="20px" class="item-ipt" maxlength="13"></uv-input>
				</view>
				<view class="form-item">
					<uv-input type="number" v-model="state.model.code" :disabled="state.isLoading" placeholder="请输入验证码"
						font-size="20px" class="item-ipt" maxlength="6">
						<template v-slot:suffix>
							<button class="" :disabled="state.isMobileEnd"
								style="height: 70rpx;font-size: 25rpx;padding-top: 5rpx;"
								@tap="getSmsCode('smsLogin', state.model.mobile)">
								{{ getSmsTimer('smsLogin') }}
							</button>
						</template>
					</uv-input>
				</view>
			</view>

			<button @click="smsLoginSubmit" :disabled="state.isLoading" loadingText="登录" class="phone-btn">登录</button>

 <button
          v-if="
            ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
            sheep.$platform.isWechatInstalled
          "
          @tap="thirdLogin('wechat')"
          class="ss-reset-button auto-login-btn"
        >
          <image
            class="auto-login-img"
            src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/1a2e97b866fd3de0b3c5c225a9cd3c705a645b0f76ad2ad8b0e25c8e6e20ab38.png"
          />
        </button>
		
		
			<view style="margin-top: 30rpx;">
				<!-- #ifdef APP-PLUS -->
				<uv-icon name="weixin-circle-fill" @click="wxLogin" size="40" color="#00cdac" label="微信登录"
					labelPos="bottom"></uv-icon>
				<!-- #endif -->
				<view class="user-box">
					<view class="user-agreement">
						<text>我已经阅读并同意</text>
						<text class="agreement" @click="goAuthorization('fw')">《用户协议》</text>与
						<text class="agreement" @click="goAuthorization('ys')">《隐私政策》</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<uv-popup :show="authorization" :closeOnClickOverlay="true" @close="authorization = false" mode="bottom"
			popWidth="400px" round="10" :customStyle="{padding:'30rpx'}">
			<view class="user-agreement">
				<view class="login-title">
					用户协议及隐私保护
				</view>
				我已阅读并同意
				<text class="agreement" @click="goAuthorization('fw')">《用户协议》</text>与<text class="agreement"
					@click="goAuthorization('ys')">《隐私政策》</text>
			</view>
			<uv-button text="同意并登录" @click="agreeLogin" class="phone-btn"></uv-button>
		</uv-popup> -->
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		code,
		mobile
	} from '@/sheep/validate/form';
	import {
		showAuthModal,
		closeAuthModal,
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import AuthUtil from '@/sheep/api/member/auth';

		// 数据
		const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		codeText: '获取验证码',
		model: {
			mobile: '', // 手机号
			code: '', // 验证码
		},
		isLoading: false,
		authorization: false,
		customStyle: {
			marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
			color: 'red'
		}
	});

    const appInfo = computed(() => sheep.$store('app').info);
	
	const smsLoginRef = ref(null);

	const emits = defineEmits(['onConfirm']);

	const props = defineProps({
		agreeStatus: {
			type: Boolean,
			default: false,
		},
	});

	onLoad(async (options) => {
		// #ifdef H5
		// 将 search 参数赋值到 options 中，方便下面解析
		new URLSearchParams(location.search).forEach((value, key) => {
			options[key] = value;
		});
		// 执行登录 or 绑定，注意需要 await 绑定
		const event = options.event;
		const code = options.code;
		const state = options.state;
		if (event === 'login') { // 场景一：登录
			await sheep.$platform.useProvider().login(code, state);
		} else if (event === 'bind') { // 场景二：绑定
			await sheep.$platform.useProvider().bind(code, state);
		}

		// 检测 H5 登录回调
		let returnUrl = uni.getStorageSync('returnUrl');
		if (returnUrl) {
			uni.removeStorage({
				key: 'returnUrl'
			});
			location.replace(returnUrl);
		} else {
			uni.switchTab({
				url: '/',
			});
		}
		// #endif
	});



	// 短信登录
	async function smsLoginSubmit() {
		let check = formCheck()
		if (!check.flag) {

			return uni.showToast({
				title: check.info,
				icon: 'none'
			});
		}
		// if (!props.agreeStatus) {
		// 	emits('onConfirm', true)
		// 	sheep.$helper.toast('请勾选同意');
		// 	return;
		// }
		try {
			state.isLoading = true
			// 提交数据
			const { code } = await AuthUtil.smsLogin(state.model);
			if (code === 0) {
				uni.reLaunch({
					url: '/pages/tabbar/index'
				});
			}
		} catch (error) {
			uni.showToast({
				title: '登录失败，请重试',
				icon: 'none'
			});
		} finally {
			state.isLoading = false
		}
	}

	function goAuthorization(name) {
		if (name === 'fw') {
			uni.navigateTo({
				url: '/pages/agreement/agreement'
			})
		} else if (name === 'ys') {
			uni.navigateTo({
				url: '/pages/privacy/privacy'
			})
		}
	}

	// 表单验证
	function formCheck() {
		let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
		if (!state.model.mobile) {
			return {
				info: '请输入手机号!',
				flag: false
			}
		} else if (!reg.test(state.model.mobile)) {
			return {
				info: '请输入正确的手机号!',
				flag: false
			}
		} else {
			return {
				flag: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		width: 100vw;
		min-height: 100vh;
		background-color: var(--bg-main);

		.login-title {
			text-align: center;
			font-size: 48rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		.login-box {
			border: 1px;
			position: relative;
			top: 20vh;
			padding: 0 80rpx;

			.login-form {
				padding: 20rpx 10rpx;

				.form-item {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					padding: 20rpx 0;

					.item-ipt {
						border: none;
						border-radius: 25px;
						padding-left: 25rpx;
						background-color: #FFFFFF;
						height: 100rpx;
						font-size: 40rpx;
						width: 100vw;
					}

					.get-code {
						height: 60rpx;
						color: #ff9933;
						border: none;
						background-color: #FFFFFF;
					}
				}
			}

			.btn-wrapper {
				width: 100%;
				padding: 0 20rpx;
			}

			.phone-btn {
				border: none;
				border-radius: 25px;
				height: 100rpx;
				background-color: var(--button-main);
			}
		}
	}
</style>